
import 'package:flutter/material.dart';
import 'package:flutter_pickers/pickers.dart';
import 'package:get/get.dart';
import 'package:high_help_apps/common/values/colors.dart';
import 'package:high_help_apps/common/widgets/common/common_button.dart';
import 'package:high_help_apps/common/widgets/common/common_listtile.dart';
import 'package:high_help_apps/common/widgets/common/common_text_field.dart';
import 'package:high_help_apps/common/widgets/common/paper_tip.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'register_user_detail_logic.dart';
import 'register_user_detail_state.dart';

class RegisterUserDetailPage extends StatefulWidget {
  @override
  _RegisterUserDetailPageState createState() => _RegisterUserDetailPageState();
}

class _RegisterUserDetailPageState extends State<RegisterUserDetailPage> {
  final RegisterUserDetailLogic logic = Get.put(RegisterUserDetailLogic());
  final RegisterUserDetailState state =
      Get.find<RegisterUserDetailLogic>().state;
  final sexList = ['男', '女', '保密'];

  @override
  Widget build(BuildContext context) {
    return _buildRegisterUserWidget(context);
  }

  Widget _buildRegisterUserWidget(context) => Column(
        children: [
          _buildPageTipHeader(),
          _buildInfoContent(context),
          _buildFinishButton()
        ],
      );

  /// 头部提示
  Widget _buildPageTipHeader() => PageHeaderTip(
        margin: EdgeInsets.symmetric(vertical: 45.r, horizontal: 20.r),
        title: '信息上传',
        subtitle: '填写信息展示您在社区的形象',
        child: Image.asset('assets/images/signup/user_upload.png'),
      );

  Widget _buildInfoContent(context) => ListView(
        padding: EdgeInsets.zero,
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        children: ListTile.divideTiles(context: context, tiles: [
          /// _buildAvatarUpload(),
          CommonListTile(
              onPressed: () {
                Get.bottomSheet(
                  _buildNameInputBottomSheet()
                );
              },
              title: '昵称',
            suffixWidget: GetBuilder<RegisterUserDetailLogic>(
              builder: (logic) => logic.state.nick_name == '' ?
                  Icon(Icons.keyboard_arrow_right) :
                  Text(logic.state.nick_name, style: TextStyle(fontSize: 18.sp),),
            ),
          ),
          CommonListTile(
            onPressed: () {
              Pickers.showSinglePicker(context,
                data: sexList,
                selectData: sexList[logic.state.sex ?? 0],
                onConfirm: (event, index) => logic.finishChooseSex(index)
              );
            },
            title: '性别',
            suffixWidget: GetBuilder<RegisterUserDetailLogic>(
              // ignore: unnecessary_null_comparison
              builder: (logic) => logic.state.sex == null ?
              Icon(Icons.keyboard_arrow_right) :
              Text(sexList[logic.state.sex], style: TextStyle(fontSize: 18.sp),),
            )
          ),
          CommonListTile(
            onPressed: () {
              Get.bottomSheet(
                  _buildEmailInputBottomSheet()
              );
            },
            title: '邮箱',
            suffixWidget: GetBuilder<RegisterUserDetailLogic>(
              builder: (logic) => logic.state.email == '' ?
              Icon(Icons.keyboard_arrow_right) :
              Text(logic.state.email, style: TextStyle(fontSize: 18.sp),),
            ),
          ),
          CommonListTile(
            onPressed: () {
              Get.bottomSheet(
                  _buildPhoneInputBottomSheet()
              );
            },
            title: '手机号',
            suffixWidget: GetBuilder<RegisterUserDetailLogic>(
              builder: (logic) => logic.state.phone == '' ?
              Icon(Icons.keyboard_arrow_right) :
              Text(logic.state.phone, style: TextStyle(fontSize: 18.sp),),
            ),
          )
        ]).toList(),
      );

  /// 头像上传区域
  // Widget _buildAvatarUpload() => CommonListTile(
  //       onPressed: () {
  //         Get.bottomSheet(_buildBottomQuerySheet());
  //       },
  //       title: '头像',
  //       suffixWidget: Padding(
  //         padding: EdgeInsets.only(bottom: 3.r),
  //         child: GetBuilder<RegisterUserDetailLogic>(
  //           builder: (logic) => logic.state.imagePath == null ? CircleAvatar(
  //             backgroundColor: Colors.black12,
  //             child: Padding(
  //               padding: EdgeInsets.all(8.r),
  //               child: Image.asset(
  //                 'assets/images/common/add.png',
  //               ),
  //             ),
  //             radius: 25.r,
  //           ) : CircleAvatar(
  //             backgroundColor: Colors.black12,
  //             backgroundImage: FileImage(
  //               File(logic.state.imagePath!.path),
  //             ),
  //             radius: 25.r,
  //           ),
  //         )
  //       ),
  //     );

  /// 构建下一步按钮
  Widget _buildFinishButton() => Padding(
        padding: EdgeInsets.symmetric(horizontal: 20.r, vertical: 40.r),
        child: CommonButton(
          child: Center(
            child: Text(
              '完成',
              style: TextStyle(color: Colors.white, fontSize: 16.sp),
            ),
          ),
          onPressed: logic.finishRegister,
          backgroundColor: AppColors.primaryElement,
          borderRadius: 8.r,
        ),
      );

  /// 头像选择 底部弹框
  // Widget _buildBottomQuerySheet() => Container(
  //       color: Colors.white,
  //       child: ListView(
  //         shrinkWrap: true,
  //         physics: NeverScrollableScrollPhysics(),
  //         padding: EdgeInsets.zero,
  //         children: [
  //           CommonListTile(
  //             onPressed: logic.uploadLocalImage,
  //             title: '上传本地',
  //             suffixWidget: Icon(Icons.cloud_upload_outlined),
  //           ),
  //           Divider(),
  //           CommonListTile(
  //             onPressed: logic.uploadCameraImage,
  //             title: '拍照上传',
  //             suffixWidget: Icon(Icons.camera),
  //           ),
  //           Divider(),
  //           CommonListTile(
  //             onPressed: () { Get.back(); },
  //             title: '取消',
  //             suffixWidget: Icon(Icons.cancel),
  //           )
  //         ],
  //       ),
  //     );

  /// 底部弹框 输入姓名
  Widget _buildNameInputBottomSheet() => Container(
    color: Colors.white,
    child: Padding(
      padding: EdgeInsets.symmetric(vertical: 45.r, horizontal: 15.r),
      child: GetBuilder<RegisterUserDetailLogic>(
        builder: (logic) => CommonTextField(
          defaultText: logic.state.nick_name,
          padding: EdgeInsets.symmetric(horizontal: 10.r, vertical: 30.r),
          placeholder: '请输入您的社区昵称',
          unselectBorderSide: BorderSide(color: AppColors.lightTextColor2, width: 0.5),
          selectBorderSide: BorderSide(color: AppColors.primaryElement, width: 1.0),
          backgroundColor: AppColors.inputBackground,
          inputTextColor: AppColors.lightTextColor,
          placeholderColor: AppColors.lightTextColor1,
          floatButtonBackgroundColor: Theme.of(context).primaryColor,
          floatButtonChild: Icon(Icons.menu_outlined, color: Colors.white,),
          onPressed: (String value) => logic.finishInputRealName(value),
        ),
      ),
    ),
  );

  /// 底部弹框 输入邮箱
  Widget _buildEmailInputBottomSheet() => Container(
    color: Colors.white,
    child: Padding(
      padding: EdgeInsets.symmetric(vertical: 45.r, horizontal: 15.r),
      child: GetBuilder<RegisterUserDetailLogic>(
        builder: (logic) => CommonTextField(
          defaultText: logic.state.email,
          padding: EdgeInsets.symmetric(horizontal: 10.r, vertical: 30.r),
          placeholder: '请输入您的邮箱',
          unselectBorderSide: BorderSide(color: AppColors.lightTextColor2, width: 0.5),
          selectBorderSide: BorderSide(color: AppColors.primaryElement, width: 1.0),
          backgroundColor: AppColors.inputBackground,
          inputTextColor: AppColors.lightTextColor,
          placeholderColor: AppColors.lightTextColor1,
          floatButtonBackgroundColor: Theme.of(context).primaryColor,
          floatButtonChild: Icon(Icons.menu_outlined, color: Colors.white,),
          onPressed: (String value) => logic.finishInputEmail(value),
        ),
      ),
    ),
  );

  /// 底部弹框 输入手机号
  Widget _buildPhoneInputBottomSheet() => Container(
    color: Colors.white,
    child: Padding(
      padding: EdgeInsets.symmetric(vertical: 45.r, horizontal: 15.r),
      child: GetBuilder<RegisterUserDetailLogic>(
        builder: (logic) => CommonTextField(
          defaultText: logic.state.phone,
          padding: EdgeInsets.symmetric(horizontal: 10.r, vertical: 30.r),
          placeholder: '请输入您的手机号',
          unselectBorderSide: BorderSide(color: AppColors.lightTextColor2, width: 0.5),
          selectBorderSide: BorderSide(color: AppColors.primaryElement, width: 1.0),
          backgroundColor: AppColors.inputBackground,
          inputTextColor: AppColors.lightTextColor,
          placeholderColor: AppColors.lightTextColor1,
          floatButtonBackgroundColor: Theme.of(context).primaryColor,
          floatButtonChild: Icon(Icons.menu_outlined, color: Colors.white,),
          onPressed: (String value) => logic.finishInputPhone(value),
        ),
      ),
    ),
  );

  @override
  void dispose() {
    Get.delete<RegisterUserDetailLogic>();
    super.dispose();
  }
}
